<template>  
  <view class="container">  
    <view class="title">预约系统</view>  
    <view class="form-group">  
      <label>预约日期：</label>  
      <picker mode="date" :value="date" @change="onDateChange">  
        <view class="picker">{{ date }}</view>  
      </picker>  
    </view>  
    <view class="form-group">  
      <label>预约时间：</label>  
      <picker mode="time" :value="time" @change="onTimeChange">  
        <view class="picker">{{ time }}</view>  
      </picker>  
    </view>  
    <view class="form-group">  
      <label>姓名：</label>  
      <input type="text" v-model="name" placeholder="请输入姓名" />  
    </view>  
    <view class="form-group">  
      <label>证件类型：</label>  
      <picker mode="selector" :range="idTypes" @change="onIdTypeChange">  
        <view class="picker">{{ idTypes[idTypeIndex] }}</view>  
      </picker>  
    </view>  
    <view class="form-group">  
      <label>证件号码：</label>  
      <input type="text" v-model="idNumber" placeholder="请输入证件号码" />  
    </view>  
    <view class="form-group">  
      <label>手机号码：</label>  
      <input type="number" v-model="phone" placeholder="请输入手机号码" />  
    </view>  
    <view class="form-group">  
      <label>同行人数：</label>  
      <input type="number" v-model="companions" placeholder="请输入同行人数" />  
    </view>  
	
    <button @click="submitReserve">提交预约</button>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      date: '2023-01-01',  
      time: '12:00:00',  
      name: '',  
      idTypes: ['身份证', '护照', '其他'],  
      idTypeIndex: 0,  
      idNumber: '',  
      phone: '',  
      companions: 0,  
    };  
  },  
  methods: {  
    onDateChange(e) {  
      this.date = e.detail.value;  
    },  
    onTimeChange(e) {  
      this.time = e.detail.value;  
    },  
    onIdTypeChange(e) {  
      this.idTypeIndex = e.detail.value;  
    },  
    submitReserve() {  
      // 这里可以添加提交到服务器的逻辑  
	  uni.navigateTo({
	  	url:'/pages/successfulApointment/successfulApointment'
	  })
      console.log('提交预约:', {  
        date: this.date,  
        time: this.time,  
        name: this.name,  
        idType: this.idTypes[this.idTypeIndex],  
        idNumber: this.idNumber,  
        phone: this.phone,  
        companions: this.companions,  
      });  
    },  
  },  
};  
</script>  
  
<style>  
.container {  
  padding: 20px;  
}  
.title {  
  font-size: 18px;  
  font-weight: bold;  
  margin-bottom: 20px;  
}  
.form-group {  
  margin-bottom: 15px;  
}  
.form-group label {  
  display: block;  
  margin-bottom: 5px;  
}  
.picker {  
  padding: 10px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  
</style>